<template>
	<view class="control">
		<view v-if="!deviceInfo && !error_tip" class="nodata">
			<text>此设备暂无数据，请稍后再试！(#{{serial_number}})</text>
		</view>
		<view v-if="error_tip" class="nodata">
			<text>该设备没有联网(#{{serial_number}})</text>
		</view>
		<view class="control-top">
			<view v-if="deviceInfo" class="border">
				<view class="container">
					<view class="wave"></view>
					<view class="text name">过滤后的TDS</view>
					<view class="text number">{{deviceInfo.S08 ? deviceInfo.S08 : ''}}</view>
					<view class="text detail">原水TDS:{{(deviceInfo&&deviceInfo.S07) || ''}}</view>
				</view>
			</view>
		</view>
		<uni-drawer ref="drawer" mode="right">
		    <uni-list>
		    	<!-- <uni-list-item :title="'原水: ' + deviceInfo.S07 + 'mg/L' " :show-arrow="false"></uni-list-item> -->
		    	<!-- <uni-list-item :title="'净水: ' + deviceInfo.S08 + 'mg/L' " :show-arrow="false"></uni-list-item> -->
		    	<uni-list-item :title='"出水温度:" + deviceInfo["S09"] + "℃"' :show-arrow="false"></uni-list-item>
		    	<!-- <uni-list-item :title="'净水温度: '+ deviceInfo.S10 + '℃' " :show-arrow="false"></uni-list-item> -->
		    	<!-- <uni-list-item :title="'交流电压: '+ deviceInfo.S11 + 'V' " :show-arrow="false"></uni-list-item>					 -->
		    	<!-- <uni-list-item :title="'出水流量: '+ deviceInfo.S13 + 'ml/min' " :show-arrow="false"></uni-list-item> -->
		    	<uni-list-item :title="'出水总量: '+ deviceInfo['S14'] + 'L' " :show-arrow="false"></uni-list-item>
		    	<uni-list-item :title="'滤芯1寿命: '+ deviceInfo['S15'] + '天' " :show-arrow="false"></uni-list-item>
		    	<uni-list-item :title="'滤芯2寿命: '+ deviceInfo['S16'] + '天' " :show-arrow="false"></uni-list-item>
		    	<uni-list-item :title="'滤芯3寿命: '+ deviceInfo['S17'] + '天' " :show-arrow="false"></uni-list-item>
		    	<uni-list-item :title="'滤芯4寿命: '+ deviceInfo['S18'] + '天' " :show-arrow="false"></uni-list-item>
		    </uni-list>
		</uni-drawer>
		<button v-if="deviceInfo&&deviceInfo.S07" class="view-details" @click="showDrawer">查看详情</button>
		<!-- <view class="control-sign flex-center-between">
			<view
				class="control-sign-item"
				v-for="(item, index) in sign"
				:key="index">
				<image class="control-sign-item-img" :src="item.icon" mode="aspectFill"></image>
				<view class="control-sign-item-txt">{{item.name}}</view>
			</view>
		</view> -->
		<view v-if="warning" class="warning">
			<view style="color: #ff5858;">报警信息:</view>
			<view v-for="(item,index) in warningArr" :key="index">{{index + 1}}、{{item.name}};</view>
		</view>
		<!-- <view class="control-btns flex-center-between">
			<view
				class="control-btns-item"
				v-for="(item, index) in btns"
				:key="index">
				<image
					class="control-btns-item-img"
					:src="item.active === 'icon' ? item.icon : item.icon2"
					mode="aspectFill"
					@click="toggleBtn(index)">
				</image>
				<view class="control-btns-item-txt">{{item.name}}</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import uniDrawer from "@/components/uni-drawer/uni-drawer.vue"
	import uniList from '@/components/uni-list.vue'
	import uniListItem from '@/components/uni-list-item.vue'
	export default {
		components: {
			uniDrawer,
			uniList,
			uniListItem,
			showRight: false,
			showLeft: false
		},
		data() {
			return {
				sign: [
					// {
					// 	name: '制水',
					// 	icon: '../../static/images/control-sign-makewater.png',
					// 	icon2: '../../static/images/control-sign-makewater2.png',
					// },
					// {
					// 	name: '水满',
					// 	icon: '../../static/images/control-sign-fullwater.png',
					// 	icon2: '../../static/images/control-sign-fullwater2.png',
					// },
					// {
					// 	name: '开锁',
					// 	icon: '../../static/images/control-sign-lockopen.png',
					// 	icon2: '../../static/images/control-sign-lockopen2.png',
					// },
					// {
					// 	name: '检修',
					// 	icon: '../../static/images/control-sign-repair.png',
					// 	icon2: '../../static/images/control-sign-repair2.png',
					// },
					// {
					// 	name: '数据异常',
					// 	icon: '../../static/images/control-sign-abnormaldata.png',
					// 	icon2: '../../static/images/control-sign-abnormaldata2.png',
					// },
				],
				
				btns: [
					// {
					// 	name: '开启',
					// 	active: 'icon',
					// 	icon: '../../static/images/control-btn-open.png',
					// 	icon2: '../../static/images/control-btn-open-hover.png',
					// },
					// {
					// 	name: '冲洗',
					// 	active: 'icon',
					// 	icon: '../../static/images/control-btn-wash.png',
					// 	icon2: '../../static/images/control-btn-wash-hover.png',
					// },
					// {
					// 	name: '锁定',
					// 	active: 'icon',
					// 	icon: '../../static/images/control-btn-lock.png',
					// 	icon2: '../../static/images/control-btn-lock-hover.png',
					// },
					// {
					// 	name: '滤芯',
					// 	active: 'icon',
					// 	icon: '../../static/images/control-btn-filter.png',
					// 	icon2: '../../static/images/control-btn-filter-hover.png',
					// },
				],
				attribute:[],
				socketTask: null,
				deviceInfo: {},
				visible: false,
				serial_number: null,
				equipment_id: null,
				error_tip: false,
				warning: '',
				// adapter_id: 0,
				warningArr: [],
				timer: null, // 定时器
			}
		},
		onLoad(options) {
			this.serial_number = options.number;
			this.byAprusGetId(options.adapter_id);
		},
		// 关闭websocket【必须在实例销毁之前关闭,否则会是underfined错误】
		beforeDestroy() {
			console.log(this.socketTask)
			uni.closeSocket();
			this.closeSocket()
		},
		methods: {
			/**
			 * 查询故障报警列表
			 * @param {Number} equipment_id
			 * @param {Number} total
			 */
			async getWarnInfo() {
				let self = this;
				let res = await this.$http.request({
					method: 'post',
					url: '/api/mixiot/equipment/get_warn_info',
					data: {
						equipment_id: this.equipment_id,
						total: 1,
					}
				})
				if (res.status === 1) {
					if(res.data){
						self.warningArr = res.data;
					} 
				}
			},
			/**
			 * 连接websocket
			 */
			connectSocketInit(){
				let that = this;
				let url = "wss://pro.litree.mixiot.top:17379/equipment/mosaic"
				this.socketTask = uni.connectSocket({
				    url: url,
					success(data) {
						console.log("websocket连接成功,url:",url)
						uni.onSocketOpen(function (res){
							uni.setStorage({
							    key: 'socket_state',
							    data: 'open',
							    success: function () {
							        console.log('success');
							    }
							});
							console.log("WebSocket连接正常打开中...！")
							let msg = JSON.stringify(["SUBSCRIBE", "/channel/equipment/"+that.equipment_id]);
							uni.sendSocketMessage({  
								data: msg,  
								success: function(){ 
									console.log("数据发送成功",msg); 
									uni.onSocketMessage(function(res) {
										console.log('收到服务器内容：',res); 
										that.deviceInfo = res.data != '{}' ? JSON.parse(res.data) : {};
										that.deviceInfo.S15 = (that.deviceInfo.S15/24).toFixed(1);
										that.deviceInfo.S16 = (that.deviceInfo.S16/24).toFixed(1)
										that.deviceInfo.S17 = (that.deviceInfo.S17/24).toFixed(1)
										that.deviceInfo.S18 = (that.deviceInfo.S18/24).toFixed(1)
									}) 
								},  						
								fail: function() { 
									console.log("数据发送失败")
								}  
							})
						})
						uni.onSocketError(function(res) {
							uni.showToast({
								title: 'WebSocket连接打开失败!',
								icon: 'none',
								duration: 3000
							})
							console.log('WebSocket连接打开失败，请检查！');
						});
					}
				});
			},
			/**
			 * 关闭websocket
			 */
			closeSocket(){
				let self = this;
				this.socketTask.onClose(() => {
					console.log("已经被关闭了")
					uni.setStorage({
					    key: 'socket_state',
					    data: 'closed',
					    success: function () {
					        console.log('success');
					    }
					});
				})
			},
			/**
			 * 切换开关
			 * @param {Number} index
			 */
			toggleBtn(index){
				this.btns[index].active = this.btns[index].active === 'icon' ? 'icon2' : 'icon'
			},
			/**
			 * 获取设备ID
			 * @param {Number} aprus_id
			 */
			async byAprusGetId(aprus_id) {
				let self = this;
				let res = await this.$http.request({
					method: 'post',
					url: '/api/mixiot/byAprusGetId',
					data: {aprus_id: aprus_id}
				})
				if (res.status === 1) {
					if(res.data){
						this.equipment_id = res.data;
						this.getWarnInfo();
						uni.showLoading({ title: "Loading.." });
						this.timer = setInterval(() => {
							this.getSocketState();
						},500)
					} else{
						this.error_tip = true;
					} 
				} else {
					this.error_tip = res.message;
				}
			},
			getSocketState(){
				 let socket_state = uni.getStorageSync('socket_state');
				 console.log('socket_state', socket_state)
				 if(!socket_state || socket_state == 'closed') {
					 uni.hideLoading();
					clearInterval(this.timer);
					this.connectSocketInit();
				 }
			},
			// 打开窗口
			showDrawer() {
				this.$refs.drawer.open()
			},
			// 关闭窗口
			closeDrawer() {
				this.$refs.drawer.close()
			},
			// 抽屉状态发生变化触发
			change(e, type) {
				this[type] = e
			},
			/**
			 * 跳转
			 * @param {String} page
			 */
			pageTo(page) {
				uni.navigateTo({
					url: page
				});
			}
		}
	}
</script>

<style lang="scss">
	.control{
		height: 100%;
		width: 750rpx;
		background: url('../../static/images/control-bg.jpg') no-repeat;
		background-size: 100% 100%;
		.nodata{
			position: absolute;
			text-align: center;
			color:#ffffff;
			top: 390rpx;
			width: 100%;
		}
		.view-details{
			font-size: 30rpx;
			width: 40%;
			background-color: #64b7e7;
			color:#ffffff;
			border-radius: 100rpx;
			margin-top: 80rpx;
		}
		.control-top{
			height: 50%;
			.border{
				position: absolute;
				width: 500rpx;
				height: 500rpx;
				top: 90rpx;
				left: 50%;
				transform: translateX(-50%);
				border: 3rpx solid rgba(157, 219, 255, 0.4);
				border-radius: 50%;
				.container {
					position: absolute;
					width: 380rpx;
					height: 380rpx;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					padding: 5rpx;
					border: 30rpx solid rgba(157, 219, 255, 0.8);
					border-radius: 50%;
					overflow: hidden;
					.text{
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
						z-index: 99;
						text-align: center;
					}
					.name{
						color: #44ade4;
						top: 15%;
					}
					.number{
						color: #007cb0;
						font-size: 174rpx;
					}
					.detail{
						top: 85%;
						color: $uni-text-color-inverse;
						font-size: $uni-font-size-sm1;
					}
					.wave {
						width: 375rpx;
						height: 375rpx;
						border-radius: 50%;
						position: relative;
						&::before,
						&::after{
							position: absolute;
							content: "";
							width: 750rpx;
							height: 750rpx;
							top: 0;
							left: 50%;
							background-color: rgba(255, 255, 255, .6);
							border-radius: 40%;
							transform: translate(-50%, -70%) rotate(0);
							animation: rotate 6s linear infinite;
							z-index: 10;
						}
						&::after {
							border-radius: 40%;
							background-color: rgba(255, 255, 255, .9);
							transform: translate(-50%, -70%) rotate(0);
							animation: rotate 10s linear -5s infinite;
							z-index: 20;
						}
					}
				}
			}
		}
		
		.control-sign{
			height: 20%;
			padding: 0 68rpx;
			&-item{
				&-img{
					height: 34rpx;
					width: 28rpx;
					display: block;
					margin: 0 auto;
				}
				&-txt{
					text-align: center;
					font-size: $uni-font-size-sm2;
					color: rgba(255, 255, 255, 0.5);
				}
				.txt2{
					color: #fff;
				}
			}
		}
		.warning{
			color: $uni-color-warning;
			margin-top: 200rpx;
			font-size: 22rpx;
			padding: 0 80rpx;
			text-align: left !important;
		}
		.control-btns{
			height: 30%;
			padding: 0 68rpx;
			&-item{
				&-img{
					height: 108rpx;
					width: 108rpx;
					border-radius: 50%;
				}
				&-txt{
					text-align: center;
					font-size: $uni-font-size-sm1;
					color: #868597;
				}
				.txt2{
					color: #1ebff3;
				}
			}
		}

		@keyframes rotate {
			50% {
				transform: translate(-50%, -70%) rotate(180deg);
			} 100% {
				transform: translate(-50%, -70%) rotate(360deg);
			}
		}
	}
		
</style>